<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">姓名</p>
        <p class="price">
          <input v-model="formData.contacts" type="text" placeholder="请输入姓名">
        </p>
      </div>
      <div class="box">
        <p class="title">登录账号</p>
        <p class="price">
          <input v-model="formData.loginName" type="text" placeholder="请输入登录账号">
        </p>
      </div>
      <div class="box">
        <p class="title">登录密码</p>
        <p class="price">
          <input v-model="formData.password" type="text" placeholder="请输入登录密码">
        </p>
      </div>
      <div class="box">
        <p class="title">身份证号</p>
        <p class="price">
          <input v-model="formData.idNo" type="text" placeholder="请输入身份证号">
        </p>
      </div>
      <div class="box">
        <p class="title">手机号</p>
        <p class="price">
          <input v-model="formData.mobile" type="text" placeholder="请输入手机号">
        </p>
      </div>
      <div class="box">
        <p class="title">分成比例</p>
        <p class="price">
          <input v-model="formData.scale" type="text" placeholder="请输入分成比例">
        </p>
      </div>
      <div class="box">
        <p class="title">合伙投资金额</p>
        <p class="price">
          <input v-model="formData.shareWithAmount" type="text" placeholder="请输入金额">
        </p>
      </div>
      <div class="photo">
        <p class="title">合伙合同</p>
        <div class="box1">
          <div class="nr">
            <block v-if="formData.contract.length">
              <div class="img_box" v-for="(item,index) in formData.contract" :key="index">
                <img @click="preview(item)" mode="aspectFill" :src="item" alt="">
                <p @click="close(index)"><van-icon name="cross" size="12"/></p>
              </div>
            </block>
            <div class="img" @click="changeImg">
              <img mode="widthFix" src="/static/images/photo.png" alt="" />
              <p>上传合同</p>
            </div>
          </div>
          <div class="text_t">
            <p class="text">上传截图或者照片</p>
            <p class="text">单张图片大小不超过2M，最多上传5张</p>
          </div>
        </div>
      </div>

      
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'添加中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即添加'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import { getToken,getRefreshToken } from "@/utils/auth";
import {
  addPartnerStoreUser
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      formData:{
        storeId:'',
        contract:[],
        contacts:'',
        loginName:'',
        password:'',
        idNo:'',
        mobile:'',
        scale:'',
        shareWithAmount:''
      },
      loading:false
    };
  },
  onShow() {
    this.loading = false
  },

  methods: {
    changeImg(){
      if(this.formData.contract.length >= 5){
        this.$toast('最多上传5张！')
        return
      }
      let arr = []
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success :(res)=>{
          wx.showLoading({title: '上传中...'})
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: 'https://gxegateway.jiuzhours.com//gxe-saas-biz/file/fileUpload',
            name: 'file',
            method: 'POST',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': `Bearer ${getToken()}`,
              'refreshToken':getRefreshToken(),
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              this.$toast('上传成功！')
              let returnData = JSON.parse(res.data)
              arr.push(returnData.data)
              this.formData.contract = this.formData.contract.concat(arr)
              console.log(arr)
              console.log(this.formData.contract)
            },
            fail: (err) => {
              console.log(err)
              this.$toast('上传失败，请重新上传！')
              wx.hideLoading()
            }
          })
          
        }
      })
    },
    close(index){
      let arr = []
      arr = this.formData.contract
      arr.splice(index, 1)
      this.formData.contract = []
      this.formData.contract = arr
    },

    preview(img){
      wx.previewImage({
        current: img, // 图片的地址url
        urls: this.formData.contract // 预览的地址url
      })
    },

    // 提交
    submit(){
      console.log(this.formData)
      this.loading = true
      this.$showLoading('添加中...')
      addPartnerStoreUser(this.formData).then(res=>{
        if(res.statusCode == '00000'){
          wx.hideLoading()
          wx.navigateBack({
            delta: 1, 
          })
          this.$toast('添加成功')
        }else{
          this.loading = false
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },
    
  },
  onLoad(options) {
    this.formData.storeId = options.storeId
  },
  onHide() {},

  onUnload() {
    
  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
    .yy{
      display: flex;
      input{
        width: 140rpx;
        border:1px solid #dcdfe6;
        text-align: center;
        height: 60rpx;
        border-radius: 10rpx;;
        margin:0;
      }
      span{
        margin:0 20rpx;
      }
  
    }
  }
}
.photo{
  margin-bottom:30rpx;
  .title{
    font-size:28rpx;
    font-weight: 500;
    color:#252628;
    margin:30rpx 0; 
  }
  .box1{
    .nr{
      display: flex;
      flex-wrap:wrap;
    }
    .img{
      width: 140rpx;
      height: 140rpx;
      background: #F8F8F8;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction:column;
      margin-right:20rpx;
      img{
        width: 48rpx;
        height: 48rpx;
      }
      p{
        font-size:24rpx;
        color:#999DA0;
        margin-top:8rpx;
      }
    }
    .img_box{
      width: 140rpx;
      height: 140rpx;
      position: relative;
      margin-right:40rpx;
      img{
        width: 140rpx;
        height: 140rpx;
        border-radius: 20rpx;
      }
      p{
        position: absolute;
        top: -12rpx;
        right: -16rpx;
        width: 40rpx;
        height: 40rpx;
        background: #333;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#fff;
      }
    }
    .text_t{
      color:#999DA0;
      font-size:26rpx;
      margin-top:24rpx;
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
</style>
